<script setup>
import { ref } from 'vue'
import { Search, Plus, Edit, Delete } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 搜索关键词
const searchKeyword = ref('')

// 处理搜索
const handleSearch = () => {
  console.log('搜索关键词:', searchKeyword.value)
}

// 操作按钮事件
const handleAdd = () => {
  ElMessage.success('点击了新增按钮')
}

const handleEdit = () => {
  ElMessage.success('点击了编辑按钮')
}

const handleDelete = () => {
  ElMessage.success('点击了删除按钮')
}
</script>

<template>
  <div class="custom-spec-tab">
    <div class="operation-bar">
      <el-button type="primary" :icon="Plus" @click="handleAdd">新增</el-button>
      <el-button type="primary" :icon="Edit" @click="handleEdit">编辑</el-button>
      <el-button type="primary" :icon="Delete" @click="handleDelete">删除</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="primary">导出</el-button>
      <el-button type="primary">日志</el-button>
      
      <div class="search-box">
        <span>规格名称</span>
        <el-input
          v-model="searchKeyword"
          placeholder="请输入规格名称"
          class="search-input"
        />
        <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
        <el-button>重置</el-button>
      </div>
    </div>
    <div class="main-content">
      <!-- 自定义规格表格 -->
    </div>
  </div>
</template>

<style scoped lang="scss">
.custom-spec-tab {
  .operation-bar {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;

    .search-box {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;

      .search-input {
        width: 200px;
      }
    }
  }

  .main-content {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    min-height: 400px;
  }
}
</style> 